<template>
  <el-dialog
    title="修改密码"
    :visible.sync="dialogVisible"
    width="500px">
    <el-form ref="form" :model="form" :rules="rules" label-width="70px">
      <pass-input v-model="form.newPass" label="新密码" prop="newPass" />
      <code-input v-model="form.code" ref="CodeInput"/>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="okClick" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import PassInput from '@/components/global/input/pass/index.vue'
  import { rule as PassRule } from '@/components/global/input/pass/index.ts'
  import CodeInput from '@/components/global/input/code/index.vue'
  import { rule as CodeRule } from '@/components/global/input/code/index.ts'
  import { Form } from 'element-ui'
  import WPopView, { PopType } from '@/utils/popView'
  import AccountModel from '@/models/AccountModel'

  @Component({
    name: 'ComLyoutChangePassword',
    components: {
      PassInput,
      CodeInput
    }
  })
  export default class ChangePassword extends Vue{

    private dialogVisible = false

    private loading = false
    private currentModel!: AccountModel

    form = {
      newPass: '',
      code: ''
    }

    rules = {
      newPass: PassRule,
      code: CodeRule
    }

    /**
     * 显示修改密码
     */
    private show(model: AccountModel){
      this.currentModel = model
      this.dialogVisible = true;
      this.$nextTick(() => {
        (this.$refs.form as Form).resetFields();
      })
    }

    private okClick() {
      (this.$refs.form as Form).validate((valid) => {
        if (valid) {
          this.loading = true
          this.currentModel.changePassword(this.form).then(() => {
            WPopView.msgSuccess('修改成功')
            this.loading = false
          })
        } else {
          return false;
        }
      });
    }
  }

</script>

<style scoped>

</style>
